<script lang="ts" setup>
const { icon } = defineProps<{
  title: string
  icon?: string
}>()

const realIconUri = computed(() => {
  return `/static/images/icons/mine/${icon}.png`
})


</script>

<template>
  <view class="item">
    <image src="@/static/images/icons/common/arrow_right.svg" w-14rpx h-24rpx absolute right-28 />
    <image :src="realIconUri" w-38 h-38 />
    <text class="title">
      {{ title }}
    </text>
  </view>
</template>

<style lang="scss" scoped>
.item {
  display: flex;
  position: relative;
  align-items: center;
  box-sizing: border-box;
  width: 100%;

  &.last::after {
    content: '';
    left: 11%;
    width: 83%;
    height: 1rpx;
    opacity: 0.3;
    bottom: -20rpx;
    position: absolute;
    background-color: #d7d7d7;
  }

  .title {
    margin-left: 38rpx;
    color: #333333;
    font-size: 30rpx;

    &:not(:last-child)::after {
      content: '';
      width: 100%;
    }
  }
}
</style>
